<template>
    <div class="content-container" v-loading="loading">
        <div class="header">
            <el-radio-group v-model="timeMode" size="medium" class="topTab">
                <el-radio-button label="单日"></el-radio-button>
                <el-radio-button label="时间集成"></el-radio-button>
                <el-radio-button label="时间序列"></el-radio-button>
            </el-radio-group>
            <el-radio-group v-model="windmode" size="medium" class="topTab" v-show="isWindfield != -1">
                <el-radio-button label="U"></el-radio-button>
                <el-radio-button label="V"></el-radio-button>
                <el-radio-button label="W"></el-radio-button>
            </el-radio-group>
        </div>

        <div class="content" id="chartsrow" ref="content">
            <el-row :gutter="60">
                <transition-group name="el-fade-in">
                    <Charts
                        v-for="chart in charts"
                        :key="chart"
                        :id="chart"
                        :time-mode="timeMode"
                        :shortname="shortname"
                        :date-options="dateOptions"
                        :modeOptions="modeOptions"
                        :window-width="windowWidth"
                        v-on:delete-chart="deleteChart"
                        ref="charts"
                    ></Charts>
                </transition-group>
            </el-row>
            <el-button
                size="medium"
                type="text"
                icon="el-icon-circle-plus"
                id="addChartButton"
                v-if="timeMode == '单日'"
                @click="addChart"
            >添加图表</el-button>
        </div>
    </div>
</template>

<script>
import Charts from '@/components/common/Charts';
import {pageLoadInfo} from '@/api/globalDeterm/globalDeterm.js'

export default {
    name: 'HeightField',
    components:{
        Charts
    },
    data(){
        return{
            timeMode: '单日',
            windmode: 'U',
            // 日期选项
            dateOptions: {},
            // 模式选项
            modeOptions: ['ECMWF', 'GRAPES', 'NCEP'],
            charts: [],
            windowWidth: document.documentElement.clientWidth,
            // Loading动画
            loading: true
        }
    },
    computed: {
        path(){
            return this.$route.path.split('/')[2];
        },
        isWindfield(){
            return this.path.indexOf('windfield');
        },
        // 顶部选项卡对应值
        shortname(){
            const {path, windmode} = this;
            switch(path){
                case 'heightfield':
                case 'buferheightfield':
                    return 'h';
                case 'temperaturefield':
                case 'bufertemperaturefield':
                    return 't';
                case 'windfield':
                case 'buferwindfield':
                    switch(windmode){
                        case 'U':
                            return 'u';
                        case 'V':
                            return 'v';
                        case 'W':
                            return 'w';
                    }
                default:
                    return 'other'
            }
        }
    },
    watch: {
        "$route": "pathChange",
        timeMode: "pathChange",
        windmode: "pathChange",
    },
    mounted(){
        const _this = this;
        // 启动loading动画
        _this.loading = true;

        // 初始化页面，获取数据
        this.$nextTick(()=>{
            this.pathChange();
        })

        // 监听窗口变化
        window.onresize = () => {
            _this.windowWidth = document.documentElement.clientWidth;
        };
    },
    methods:{
        // 获取日期选项
        getMode_Date(){
            const _this = this;
            this.loading = true;
            pageLoadInfo().then(({data}) => {
                // 取传来的数据中额外的模式
                let extra_mode = data.mode_list.filter((item)=>{return _this.modeOptions.indexOf(item)===-1})
                // 模式固定有三种，与传来的模式列表取并集
                _this.modeOptions = _this.modeOptions.concat(extra_mode)
                // 将传来的日期以模式名为key存入对象
                for(let index in data.mode_list){
                    _this.dateOptions[data.mode_list[index]] = data.dates_list[index]
                }

                // 将没有日期的模式初始化为空数组
                let empty_mode = this.modeOptions.filter((item)=>{return data.mode_list.indexOf(item)===-1})
                for(let prop of empty_mode){
                    _this.dateOptions[prop] = []
                }
                // 初始化图表
                this.resetChart();
            });
        },
        // 添加图表
        addChart(){
            this.charts.push('chart' + (this.charts.length+1));
            this.$nextTick(() => {
                let content = document.getElementById('chartsrow');
                
                let timer = setInterval(() => {
                    let pre_scrollTop = content.scrollTop;
                    content.scrollTop += 15;
                    if(pre_scrollTop == content.scrollTop){
                        clearInterval(timer);
                    }
                }, 16);
                
            })
        },
        // 删除图表
        deleteChart(id){
            // alert(id)
            let charts = this.charts
            if(charts.length <= 1) this.$message.warning('不能删除最后一个图表')
            else charts.splice(charts.indexOf(id), 1)
        },
        // 路径变化
        pathChange(){
            console.log('当前shortname： ' + this.shortname)
            this.getMode_Date();
            if(this.path.indexOf('windfield') != -1) this.$refs.content.style.top = "90px";
            else this.$refs.content.style.top = '45px';
        },
        // 重置图表
        resetChart(){
            this.charts.splice(0, this.charts.length);
            // this.charts.push('chart1');
            // console.log(this.$child);
            // this.$ref.charts.$emit('reset');
            this.$nextTick(()=>{
                this.charts.push('chart' + (this.charts.length+1));
                // 启动loading动画
                this.loading = false;
            });
        }
    }
}
</script>

<style lang="scss" scoped>
    @import '@/assets/css/DFcontent.scss';
    .content-container>.content{
        position: absolute;
        top: 45px; bottom: 0;
        width: 100%;
    }
</style>